<template>
    <div class="comment-reply">
        <!-- 回复的头部导航栏 -->
        <van-nav-bar>
            <template #title>
                <div>{{ comment.reply_count }} 条回复</div>
            </template>
            <template #left>
                <van-icon name="cross" @click="$emit('close')" />
            </template>
        </van-nav-bar>
        <!-- 回复内容主体 -->
        <div class="comment-content">
            <CommentItem :comment="comment" :replyButton="false"></CommentItem>
            <!-- 回复列表 -->
            <van-cell title="全部回复"/>
            <CommentList type="c" :source="comment.com_id" :commentList="commentList" @replyClick="onReply($event)" ></CommentList>
        </div>

        <!-- 发布回复 -->
        <van-button type="default"  size="large" @click="onReply(null)">回复</van-button>

        <!-- 写回复的弹出层 -->
        <van-popup v-model="show" position="bottom" :style="{ height: '17%' }" >
            <CommentPost commentType="c" :target="comment.com_id" v-if="show" :authorName="authorName"  @postSuccess="onPostSuccess"></CommentPost>
        </van-popup>
    </div>
</template>

<script>
import CommentList from './comment-list.vue'
import CommentItem from '@/components/comment-item'
import CommentPost from './comment-post.vue'

export default {
    name: 'CommentReply',
    components: {
        CommentItem,
        CommentList,
        CommentPost
    },
    props: {
        comment: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            show: false, //控制弹层的展示
            commentList: [], //回复列表
            authorName: null //要回复的用户的名字
        }
    },
    methods: {
        // 点击回复按钮
        onReply(param) {
            console.log(param)
            if(!this.$store.state.user) {
                // 未登录，则跳转到登录页面
                this.$toast('您还没有登录！')
                this.$router.push('/login')        
            }else {
                // 已登录，继续判断回复是否需要 @xxx 形式（三级回复）
                if(param) {
                    this.authorName = param.aut_name
                } else {
                    this.authorName = null
                }
                // 打开回复弹层
                this.show = true
            }
        },

        // 发布成功时的操作
        onPostSuccess(comment) {
            this.show = false
            this.commentList.unshift(comment)
            this.comment.reply_count++
        }
    }
}
</script>

<style lang="less" scoped>
.comment-reply {
    .van-nav-bar {   
        // position: fixed;
        // top: 0;
        // left: 0;
        // right: 0;
        /deep/ .van-nav-bar__content {
            background-color: white;

            .van-nav-bar__title {
                color: black;
            }

            .van-icon {
                color: black;
            }
        }
    }

    .comment-content {
        padding: 0 20px;
        // 让回复内容有自己的滚动区域
        position: absolute;
        top: 92px;
        left: 0;
        right: 0;
        bottom: 80px;
        overflow-y: auto;
    }
    .van-button {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        font-size: 28px;
        border-top: 1px solid #d8d8d8;
    }
}
</style>